<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      xmlns:gdmt="">
<head>
  <div th:replace="common/common::html"></div>
  <meta charset="UTF-8">
  <title th:text="#{post.info.tip}"></title>

  <script th:inline="javascript" >


    var leftMenuSetting = {
      check: {
        enable: false
      },
      data: {
        simpleData: {
          enable: true
        }
      },
      callback : {
        onClick : onClickNode
      }
    };
    function leftMenuLoad() {
      $.ajax({
            type: 'post',
            async: false,
            dataType : 'json',
            url: /*[[@{getPostTree}]]*/'',
            data: [],
            success: function (data) {
              $.fn.zTree.init($("#menu-left-tree-ul-id"), leftMenuSetting, data);
            },
            error: function(msg){
              message(/*[[#{common.error}]]*/'');
            }
          }
      );
    }

    $(function() {
      leftMenuLoad();
    });

    //页面自适应
    function resizePageSize(){
      _gridWidth = $(document).width()-189;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
      _gridHeight = $(document).height()-32-20; /* -32 顶部主菜单高度，   -90 查询条件高度*/
      $("body").css("height",_gridHeight+"px")
    }
    $(function () {
      leftMenuLoad();
      resizePageSize();
      //var _columnWidth = _gridWidth/5;
      $("#flexigrid-id").flexigrid({
        width : _gridWidth,
        height : _gridHeight,
        url : /*[[@{getPostInfoListByPage}]]*/"",
        dataType : 'json',
        colModel : [
          {display : 'dutyid',name : 'dutyid',width : 150,sortable : false,align : 'center',hide : 'true'},
          {display : /*[[#{duty.id}]]*/"",name : 'dutyid',width : _gridWidth/4, sortable : true,align : 'center'},
          {display : /*[[#{duty.name}]]*/"",name : 'name',width :_gridWidth/5, sortable : true,align : 'center'},
          {display : /*[[#{duty.roleName}]]*/"",name : 'roleName',width : _gridWidth/6, sortable : true,align : 'center'},
          {display : /*[[#{duty.organName}]]*/"",name : 'organName',width : _gridWidth/6, sortable : true,align : 'center'},
          {display : /*[[#{common.operation}]]*/"",name : '',width : _gridWidth/7, sortable : true,align : 'center',process:function (y, _trid, _row) {
              var htmlContent = '<a href="#" onclick="deletePost( \''+ y + '\')"><i class="glyphicon glyphicon-minus" style="color: #2f332a"></i></a>';
              return htmlContent;
            }}
        ],
        resizable : false, //resizable table是否可伸缩
        useRp : true,
        usepager : true, //是否分页
        autoload : false, //自动加载，即第一次发起ajax请求
        hideOnSubmit : true, //是否在回调时显示遮盖
        showcheckbox : true, //是否显示多选框
        //rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
        rowbinddata : true

      });
      $("#query-btn-id").click(function(event){
        event.stopPropagation();
        queryBtn();
      })
      //确认删除对话框
      $("#confirm-post-del-id").dialog({
        autoOpen : false,
        width : 400,
        modal : true,
        resizable : false,
        title: /*[[#{post.delete.tip.title}]]*/'',
        buttons: [
          {
            text: /*[[#{common.confirm}]]*/'',
            click: function() {
              var postId = $("#confirm-post-del-id").attr("postId");
              $.ajax({
                type: 'post',
                async: false,
                dataType: 'json',
                url: /*[[@{deletePostById}]]*/'',
                data: [{name: "postId", value: postId}],
                success: function (data) {
                  message(data.msg);
                  $("#confirm-post-del-id").dialog( "close" );
                },
                error: function (msg) {
                  message(/*[[#{common.error}]]*/'');
                }
              });

            }
          },
          {
            text: /*[[#{common.cancel}]]*/'',
            click: function() {
              $( this ).dialog( "close" );
            }
          },
        ]
      });

    });//ready
    function queryBtn() {//用户表格的查询
      var searchPostName = $("#search-post-name-id").val();
      $("#flexigrid-id").flexOptions({
        extParam:[
          {name:"searchPostName",value:searchPostName}
        ]
      }).flexReload();
    }

    function deletePost(postId){
      $("#confirm-post-del-id").attr("postId",postId);
      $("#confirm-post-del-id").dialog('open');
    }

    //ztree回调事件
    function onClickNode(event, treeId, treeNode){
      //console.info(treeNode.id);
      $.ajax({
            type: 'post',
            async: false,
            dataType : 'json',
            url: /*[[@{/post/getPostInfoById}]]*/'',
            data: [{name:"postId",value:treeNode.id}],
            success: function (data) {
              var dom = $("#modify-post-info-form-id .form-control");
              dom.each(function(index,item) {
                var nameAttr = $(item).attr("name");
                // console.info(data[nameAttr]);
                $(item).val(data[nameAttr]);
              });

            },
            error: function(msg){
              message(/*[[#{common.error}]]*/'');
            }
          }
      );
    }



  </script>


</head>

<body>
<div style="flex-grow: 1; display: flex; flex-direction: row">
  <div>

    <nav>
      <span th:text="#{post.info.tip}"></span>
      <ul id="menu-left-tree-ul-id" class="ztree" ></ul>
    </nav>
  </div>

  <div style="flex-basis: 500px">
    <div>
      <span th:text="#{post.info.tip}"></span>
      <input type="text" id="search-post-name-id" th:placeholder="#{post.name}">
      <a href="#" id="query-btn-id" class="navbar-btn">
        <i class="glyphicon glyphicon-zoom-in"></i>
        <span th:text="#{common.query}"></span>
      </a>
      <a href="#" id="add-btn-id" class="navbar-btn">
        <i class="glyphicon glyphicon-plus"></i>
        <span th:text="#{common.add}"></span>
      </a>
      <a href="#" id="modify-btn-id" class="navbar-btn">
        <i class="glyphicon glyphicon-wrench"></i>
        <span th:text="#{common.modify}"></span>
      </a>

    </div>
    <table id="flexigrid-id"></table>
    <div id="confirm-post-del-id" style="display:none">
      <span th:text="#{post.delete.tip.info}"></span>
    </div>


  </div>
</div>


</body>

</html>